<div class="container_16 containerHeight">
    <div class="grid_12 push_1">
        <fieldset style="border-color: red;">
            <legend><h2><?= lang("sinLeer"); ?></h2></legend>
            <form id="frm" action="backend/notificacion/notificacion/accion" method="post">
                <table id="sinLeer">
                    <thead>
                    <tr>
                        <td><?= lang("asunto"); ?></td>
                        <td><?= lang("fecha"); ?></td>
                        <td><?= lang("leer"); ?></td>
                        <td><?= lang("seleccionar"); ?></td>
                    </tr>
                    </thead>
                    <tbody>
                    <?php foreach ($notificaciones as $n): ?>
                        <?php if ($n->leido == 0) {
                            ?>
                        <tr>
                            <td width="40%"><?= $n->asunto ?></td>
                            <td><?= $n->fecha ?></td>
                            <td>
                                <center><a href="backend/notificacion/notificacion/leer/<?= $n->id ?>"><img
                                    src='images/notificacion/leer.png' alt=''/></a></center>
                            </td>
                            <td style="text-align: center"><input type="checkbox" name="marcado[]" value="<?=$n->id?>"
                                                                  id="<?=$n->id?>"/></td>
                        </tr>
                            <?php } ?>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <div style="text-align: right">
                    <div class="grid_1 push_13" style="text-align: center; margin-top: 20px">
                        <div id="bo" class="icono">
                            <img id="borrar" src="images/depositos/disabled.png" alt="">
                            <?=lang("borrar");?>
                        </div>
                    </div>
                    <div class="grid_2 push_13" style="text-align: center; margin-top: 20px">
                        <div id="le" class="icono">
                            <img id="leido" src="images/notificacion/leido.png" alt=""><br>
                            <?=lang("marcarLeido");?>
                        </div>
                    </div>
                    <input type="hidden" id="accion" name="accion" value=""/>
                </div>
            </form>
        </fieldset>
        <fieldset style="border-color: red;">
            <legend><h2><?= lang("leidas"); ?></h2></legend>
            <table id="leidos">
                <thead>
                <tr>
                    <td><?= lang("asunto"); ?></td>
                    <td><?= lang("fecha"); ?></td>
                    <td><?= lang("leer"); ?></td>
                    <td>eliminar</td>
                </tr>
                </thead>
                <tbody>
                <?php foreach ($notificaciones as $n): ?>
                    <?php if ($n->leido == 1) {
                        ?>
                    <tr>
                        <td width="40%"><?= $n->asunto ?></td>
                        <td><?= $n->fecha ?></td>
                        <td>
                            <center><a href="backend/notificacion/notificacion/leer/<?= $n->id ?>"><img
                                src='images/notificacion/leer.png' alt=''/></a></center>
                        </td>
                        <td><a href="backend/notificacion/notificacion/borrar/<?= $n->id ?>">
                            <center><img src="images/depositos/disabled.png" alt=""/></center>
                        </a></td>
                    </tr>
                        <?php } ?>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </fieldset>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#sinLeer').dataTable({
            "bJQueryUI":true,
            "bInfo":false,
            "bSort":false,
            "bAutoWidth":false,
            "bLengthChange":false,
            "oLanguage":{
                "sUrl":"<?= lang('datatables_lng') ?>"
            }
        });
        $('#leidos').dataTable({
            "bJQueryUI":true,
            "bInfo":false,
            "bSort":false,
            "bAutoWidth":false,
            "bLengthChange":false,
            "oLanguage":{
                "sUrl":"<?= lang('datatables_lng') ?>"
            }
        });
        /*$("#borrar").click(function () {
            $("#accion").val("borrar");
            $("#frm").submit();
        });
        $("#leido").click(function () {
            $("#accion").val("leido");
            $("#frm").submit();
        });*/
        $("#bo").click(function () {
            $("#accion").val("borrar");
            $("#frm").submit();
        });
        $("#le").click(function () {
            $("#accion").val("leido");
            $("#frm").submit();
        });

    });
</script>
<style type="text/css">
    .icono {
        cursor: pointer;
    }
</style>